<style lang="scss" scoped>
.air-hand-item {
  background-color: #f0f2f5;
  border-radius: 6px;
  padding: 10px;
  margin: 5px;
  cursor: pointer;

  &--2 {
    background-color: #fff1ef;
  }

  &__header-wrapper {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
  }

  &__name {
    flex: 1;
    color: #3b3b3b;
    font-size: 14px;
    font-weight: bold;
  }
  &__status {
    position: relative;
    font-weight: 500;

    &::before {
      position: absolute;
      content: ' ';
      width: 5px;
      height: 5px;
      border-radius: 5px;
      margin-right: 5px;
      top: 50%;
      margin-top: -2.5px;
      left: -10px;
      background-color: #000;
    }

    &--1 {
      &::before {
        background-color: #01b07f;
      }
      color: #01b07f;
    }

    &--2 {
      &::before {
        background-color: #ff6a55;
      }
      color: #ff6a55;
    }
  }

  &__body {
    text-align: center;
    margin-bottom: 20px;

    & > img {
      height: 80px;
    }
  }

  &__footer {
    display: flex;
    align-items: center;
  }

  &__index-item {
    flex: 1;
    overflow: hidden;
    text-align: center;
    white-space: nowrap;
    text-overflow: ellipsis;

    & > span {
      padding: 2px 10px;
      background-color: #fff;
      font-size: 14px;
      color: #3b3b3b;
      border-radius: 10px;
      display: inline-block;
    }

    & > i {
      padding: 5px;
      background-color: #fff;
      font-size: 14px;
      line-height: 14px;
      color: #3b3b3b;
      border-radius: 15px;
      display: inline-block;
    }

    &:first-child {
      text-align: left;
    }

    &:last-child {
      text-align: right;

      & > span {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        max-width: calc(100% - 20px);
      }
    }

    &--1 {
      & > span,
      & > i {
        color: #01b07f;
        background-color: rgba(1, 176, 127, 0.16);
      }
    }

    &--2 {
      & > span,
      & > i {
        color: #ff6a55;
        background-color: #ffdbd6;
      }
    }

    &--3 {
      & > span {
        background-color: transparent;
      }
    }
  }
}
</style>

<template>
  <div class="air-hand-item" :class="{ 'air-hand-item--2': info.pointDiGzztValue === '1' }">
    <div class="air-hand-item__header-wrapper">
      <div class="air-hand-item__name">{{ info.deviceName }}</div>
      <div
        v-if="['0', '1'].includes(info.pointDiGzztValue)"
        class="air-hand-item__status"
        :class="{
          'air-hand-item__status--1': info.pointDiGzztValue === '0',
          'air-hand-item__status--2': info.pointDiGzztValue === '1',
        }"
      >
        <span v-if="info.pointDiGzztValue === '0'">正常</span>
        <span v-else-if="info.pointDiGzztValue === '1'">故障</span>
      </div>
    </div>
    <div class="air-hand-item__body">
      <img :src="img_lift" />
    </div>
    <div class="air-hand-item__footer">
      <div
        class="air-hand-item__index-item"
        :class="{
          'air-hand-item__index-item--1': info.pointDiYxztValue === '1',
          'air-hand-item__index-item--2': info.pointDiYxztValue === '0',
          'air-hand-item__index-item--3': !['0', '1'].includes(info.pointDiYxztValue),
        }"
      >
        <span v-if="info.pointDiYxztValue === '1'">运行</span>
        <span v-else-if="info.pointDiYxztValue === '0'">停止</span>
        <span v-else>-</span>
      </div>
      <div
        class="air-hand-item__index-item"
        :class="{
          'air-hand-item__index-item--1': info.pointDiYxztValue === '1',
          'air-hand-item__index-item--2': info.pointDiYxztValue === '0',
          'air-hand-item__index-item--3': !['0', '1'].includes(info.pointDiYxztValue),
        }"
      >
        <i class="el-icon-top"></i>
        <!-- <i class="el-icon-bottom"></i> -->
      </div>
      <div class="air-hand-item__index-item">
        <el-tooltip effect="dark" :content="info.regionName" placement="top">
          <span>{{ info.regionName || '-' }}</span>
        </el-tooltip>
      </div>
    </div>
  </div>
</template>

<script>
import { deviceHospitalDto } from '@admin/views/Monitor/Source/api/hospital/dto.js'
import img_lift from './lift.png'

export default {
  name: 'LiftHandItem',
  props: {
    info: {
      type: Object,
      default: () => deviceHospitalDto(),
    },
  },
  data() {
    return {
      img_lift,
    }
  },
}
</script>
